
import React from 'react';
import './index.css'
import Tag from "./Tag";
import Ipt from "./ipt";

export default class Tars extends React.Component{

    constructor(props) {
        super(props);
        this.state = {
            tagList:[]
        }
    }
    //子组件键盘事件
    handleKeyDown = (text)=>{
        this.setState({
            ...this.state,
            tagList:[...this.state.tagList,{
                id:Math.random(),
                text
            }]
        })
    }
    render() {
        return (
            <div className={'box'}>
                {
                    this.state.tagList.map(item=> <Tag del={(res)=>{

                        console.log(this.state.tagList.filter( item => item !== res ))
                        this.setState({
                            ...this.state,
                            tagList:this.state.tagList.filter( item => item.id !== res )
                        })

                    }} key={item.id} tid={item.id} text={item.text}  /> )
                }
                <Ipt handleKeyDown={this.handleKeyDown} />
            </div>
        )
    }

}